import React from "react";
import { Layout, Row, Col, Form, Icon, Input, Button } from "antd";
import styled from "styled-components";

import useLogin from "../hooks/useLogin";

const LoginForm = styled.div`
  padding-top: 20vh;
  .login-form {
    max-width: 300px;
    &-forgot {
      float: right;
    }
    &-button {
      width: 100%;
    }
  }
`;

const Login = ({ form }) => {
  const { getFieldDecorator } = form;
  const { handleLogin } = useLogin({ form });

  return (
    <Layout style={{ height: "100vh" }}>
      <Row type="flex" justify="center">
        <Col xs={12} sm={10} md={8} lg={7} xl={5}>
          <LoginForm>
            <Form onSubmit={handleLogin} className="login-form">
              <Form.Item>
                {getFieldDecorator("username", {
                  rules: [{ required: true, message: "请输入用户名！" }]
                })(
                  <Input
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="用户名"
                  />
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator("password", {
                  rules: [{ required: true, message: "请输入密码！" }]
                })(
                  <Input
                    prefix={
                      <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    type="password"
                    placeholder="密码"
                  />
                )}
              </Form.Item>
              <Form.Item>
                <a className="login-form-forgot" href="http://a">
                  忘记密码？
                </a>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  登录
                </Button>
                或者 <a href="http://a">注册新用户</a>
              </Form.Item>
            </Form>
          </LoginForm>
        </Col>
      </Row>
    </Layout>
  );
};

const WrappedLoginForm = Form.create({ name: "normal_login" })(Login);

export default WrappedLoginForm;
